#!/usr/bin/env python
# -*- coding: utf-8 -*-

from common import caller

def print_carousel():
    print '''
    <!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img class="first-slide" src="" alt="First slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Example headline.</h1>
              <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="second-slide" src="" alt="Second slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>Another example headline.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
            </div>
          </div>
        </div>
        <div class="item">
          <img class="third-slide" src="" alt="Third slide">
          <div class="container">
            <div class="carousel-caption">
              <h1>One more for good measure.</h1>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
              <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div><!-- /.carousel -->
    '''
    
def print_form():
    print '''
        <div class="container">
        <form action="http://localhost/cgi-bin/list.py" class="form-horizontal"  role="form">
            <fieldset>
            <div class="row">
                   <div class="col-sm-4">
                    <label for="date" class="col-md-2 control-label">Date</label>
                    <div class="input-group date form_date col-md-10" data-date="" data-date-format="yyyymmdd" data-link-field="date" data-link-format="yyyymmdd">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                    <input type="hidden" id="date" value="" name="date"/>
                </div>
                <div class="col-sm-4">
                       <button type="submit" class="btn btn-primary">Search</button>
                   </div>
            </div>
            </fieldset>
        </form>
    </div>
    <br/>
    '''
def print_yesterday():
    html_str = '''
    <div class="container">
        <!-- Example row of columns -->
          <div class="row">
            <div class="col-sm-4">
                  <div class="list-group">
                    <a class="list-group-item active">
                      Yesterday Top 20
                    </a>
    '''
    counter = 1
    label = ''
    for item in caller.get_top_by_date('20151001', 10):
        if counter in range(1, 2):
            label = 'label-danger'
        elif counter in range(2, 4):
            label = 'label-warning'
        else:
            label = 'label-info'
        html_str += '''
                    <a class="list-group-item">
                        <span class="label %s">%s</span> %s 
                    </a>
        ''' % (label, str(counter).zfill(2), item[0])
        counter += 1
        
    html_str += '''
                    <a href="./list.py?date=20151031" class="list-group-item">
                        <span class="label label-success">=></span> More Detail
                    </a>
                  </div>
            </div><!-- /.col-sm-4 -->
    '''
    print html_str
def print_week():
    print '''
        <div class="col-sm-4">
                  <div class="list-group">
                    <a href="#" class="list-group-item active">
                      Week Top 20
                    </a>
                    <a class="list-group-item">
                        <span class="label label-danger">01</span> Dapibus ac facilisis in 
                    </a>
                    <a class="list-group-item">
                        <span class="label label-warning">02</span> Morbi leo risus
                    </a>
                    <a class="list-group-item">
                        <span class="label label-warning">03</span> Porta ac consectetur ac
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">04</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">05</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">06</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">07</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">08</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">09</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">10</span> Vestibulum at eros
                    </a>
                    <a href="week.py" class="list-group-item">
                        <span class="label label-success">=></span> More Detail
                    </a>
                  </div>
            </div><!-- /.col-sm-4 -->
    '''

def print_month():
    print '''
        <div class="col-sm-4">
                  <div class="list-group">
                    <a href="#" class="list-group-item active">
                      Month Top 20
                    </a>
                    <a class="list-group-item">
                        <span class="label label-danger">01</span> Dapibus ac facilisis in 
                    </a>
                    <a class="list-group-item">
                        <span class="label label-warning">02</span> Morbi leo risus
                    </a>
                    <a class="list-group-item">
                        <span class="label label-warning">03</span> Porta ac consectetur ac
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">04</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">05</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">06</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">07</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">08</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">09</span> Vestibulum at eros
                    </a>
                    <a class="list-group-item">
                        <span class="label label-info">10</span> Vestibulum at eros
                    </a>
                    <a href="month.py" class="list-group-item">
                        <span class="label label-success">=></span> More Detail
                    </a>
                  </div>
            </div><!-- /.col-sm-4 -->
        </div>
        
    </div><!-- /container -->
    '''
    
def print_script():
    print '''
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/jquery-1.8.3.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../bootstrap-3.3.5/datetime/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript">
        $('.form_date').datetimepicker({
        //language:  'fr',
        weekStart: 1,
        todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
    </script>
    '''